

// 滚动条样式
// ::v-deep ::-webkit-scrollbar {
// 	width: 4px !important;
// 	height: 1px !important;
// 	overflow: auto !important;
// 	background: #ccc !important;
// 	-webkit-appearance: auto !important;
// 	display: block;
// }
// ::v-deep ::-webkit-scrollbar-thumb {
// 	border-radius: 10px !important;
// 	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
// 	background: #7b7979 !important;
// }
// ::v-deep ::-webkit-scrollbar-track {
// 	background: #FFFFFF !important;
// }

/* #ifdef APP || APP-HARMONY */

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

uni-button {
	margin-left: initial;
	margin-right: initial;
}
/* #endif */

/* #ifdef MP-WEIXIN */
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

uni-button {
	margin-left: initial !important;
	margin-right: initial !important;
}
/* #endif */


// 这里是最新定义的公共样式
// 公共样式
.common {
	
	
	// 卡片容器相关样式
	&__box {
		// 主表关联样式--用于明细页
		&__form {
			background-color: #fff;
			min-height: 100rpx;
			padding: 20rpx;
			// 明细主表容器样式
			&__card {
				position: relative;
				background-color: #4499ec;
				color: #fff;
				border-radius: 16rpx;
				padding: 20rpx;
				&__title {
					font-size: 36rpx;
					font-weight: 600;
					width: fit-content;
				}
				&__field {
					padding: 8rpx 0;
					font-size: $main-card-size-text;
					display: flex;
					&__label {
						width: fit-content;
					}
					&__value {
						flex: 1;
						flex-wrap: wrap;
						
						&-right {
							text-align: center;
						}
					}
				}
				&__more {
					padding: 4rpx 0;
					font-weight: 600;
				}
			}
		}
		
		// field样式
		&__field {
			padding: 8rpx 0;
			
			display: flex;
			justify-content: space-between;
			font-size: $main-card-size-text;
			
			&-disabled {
				background-color: #e9e9e9;
				color: #333;
			}
			
			&__label {
				width: fit-content;
			}
			&__value {
				margin-left: 10rpx;
				flex: 1;
				flex-wrap: wrap;
				
				&-right {
					text-align: right;
				}
				&-left {
					text-align: left;
				}
			}
		}
		
		// 通用--主列表卡片样式
		&__list-card {
			position: relative;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			
			&__top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				&__left {
					display: flex;
					align-items: center;
					
					&__title {
						font-size: $main-card-size-title;
						font-weight: 600;
					}
				}
				
				&__right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
			
			&__content {
				margin-top: 8rpx;
				
				&__field {
					padding: 8rpx 15rpx;
					font-size: $main-card-size-text;
					display: flex;
					position: relative;
					
					&__label {
						color: #999;
						width: fit-content;
					}
					&__value {
						color: #999;
						flex: 1;
						flex-wrap: wrap;
					}
				}
			}
			
		}
		
		// 通用--子列表卡片样式
		&__child {
			&__card {
				padding: 20rpx;
				background-color: #fff;
				border-radius: 16rpx;
				min-height: 100rpx;
				margin-bottom: 15rpx;
				
				&__top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					&__left {
						display: flex;
						align-items: center;
						
						&__title {
							font-size: $main-card-size-title;
							font-weight: 600;
						}
					}
				}
				
				&__content {
					margin-top: 8rpx;
					// padding-left: 30rpx;
					
					&__field {
						padding: 8rpx 15rpx;
						font-size: $main-card-size-text;
						display: flex;
						position: relative;
						
						&__required {
							color: #ff0800;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							
							
						}
						
						&__label {
							color: #999;
							width: fit-content;
						}
						&__value {
							color: #999;
							flex: 1;
							flex-wrap: wrap;
						}
					}
				}
			}
		}
	}
	
	
	// 弹层容器相关样式
	&__popup {
		display: flex;
		flex-direction: column;
		
		&__top {
			
		}
		
		&__main {
			flex: 1;
			overflow: auto;
		}
		
		&__bottom {
			width: 100%;
			height: 70px;
			padding: 6px 15px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			background-color: #fff;
		}
	}
	
	// 通用按钮样式定义
	&__btn {
		min-width: 160rpx !important;
		font-size: 14px !important;
		padding: 2px 4px !important;
		box-sizing: border-box;
		
		/* #ifdef MP-WEIXIN */
		::v-deep .u-button {
			min-width: 160rpx !important;
			font-size: 14px !important;
			padding: 2px 4px !important;
		}
		/* #endif */
	}
}


// 序号
.number__circle {
	// background-color: $main-background-color;
	background-color: $main-background-color;
	color: $main-title-color;
	font-size: 24rpx;
	min-width: 30rpx;
	height: 30rpx;
	line-height: 30rpx;
	border-radius: 15rpx;
	text-align: center;
}


// 通用表单页面基础样式
.page__content {
	display: flex;
	flex-direction: column;
	background-color: #f9f9f9;
	
	// 处理导航栏图标间距问题
	.navbar--left {
		:deep(.u-icon) {
			margin-right: 20rpx !important;
		}
	}
	
	&__search {
		background-color: $main-title-color;
		background-color: $main-background-color;
		padding: 6px 2px 6px 6px;
		
	}
	
	&__main {
		flex: 1;
		overflow: auto;
		
		
		// 情况1：使用u-form
		:deep(.u-form) {
			padding: 0 20rpx;
			background-color: #fff;
		
			.iptView {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	&__bottom {
		width: 100%;
		height: 70px;
		padding: 6px 15px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #fff;
		border-top: 1px solid #eeeeee;
		
		&__left {
			
			&__num-box {
				color: #999;
				
				&__num {
					margin: 0 4rpx;
					color: $main-background-color;
				}
				
			}
		}
		
		// 定义按钮样式
		&__btn {
			min-width: 160rpx !important;
			font-size: 14px !important;
			padding: 2px 4px !important;
			box-sizing: border-box;
			
			/* #ifdef MP-WEIXIN */
			::v-deep .u-button {
				min-width: 160rpx !important;
				font-size: 14px !important;
				padding: 2px 4px !important;
			}
			/* #endif */
		}
		
		button {
			margin-left: 10px;
		}
	}
}

// 通用--弹层组件样式
.popup__content {
	display: flex;
	flex-direction: column;
	background-color: #f9f9f9;
	// 处理导航栏图标间距问题
	.navbar--left {
		:deep(.u-icon) {
			margin-right: 20rpx !important;
		}
	}
	
	&__main {
		flex: 1;
		overflow: auto;
		
		// 标题栏
		&__section {
			padding: 15rpx;
			
			&__title {
				font-size: $main-card-size-text;
				font-weight: 600;
			}
			
			&__content {
				padding: 15rpx;
			}
		}
		
		// 情况1：使用u-form
		:deep(.u-form) {
			padding: 0 20rpx;
			background-color: #fff;
		
			.iptView {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	&__bottom {
		width: 100%;
		height: 70px;
		padding: 6px 15px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #fff;
		
		// 定义按钮样式
		&__btn {
			min-width: 160rpx !important;
			font-size: 14px !important;
			padding: 2px 4px !important;
			box-sizing: border-box;
			
			/* #ifdef MP-WEIXIN */
			::v-deep .u-button {
				min-width: 160rpx !important;
				font-size: 14px !important;
				padding: 2px 4px !important;
			}
			/* #endif */
		}
		
		button {
			margin-left: 10px;
		}
	}
}


// 定义uniapp的自定义导航栏基础设置
.uni-navbar {
	&__content {
		background-color: $main-background-color !important;
	}
}

.uni-navbar {
	.uni-status-bar {
		background-color: $main-background-color !important;
	}
	
	.uni-navbar__header {
		background-color: $main-background-color !important;
		
		.uni-navbar__header-btns-left {
			.uni-icons {
				color: $main-title-color !important;
			}
		}
		
		.uni-nav-bar-text {
			color: $main-title-color !important;
			font-size: $main-title-size !important;
		}
	}
}

// uview-plus form表单样式处理
// 情况1：使用u-form
.u-form {
	padding: 0 24rpx !important;
	background-color: #fff !important;

	.iptView {
		width: 100%;
		height: 100%;
		
		.u-input,
		.u-input__content,
		.u-input__content__field-wrapper,
		.u-input__content__field-wrapper__field {
			height: 100%;
		}
	}
}

.u-form-item {
	// padding: 0 16px !important;
	.u-form-item__body {
		padding: 20rpx 0 !important;
	}
	
	.u-form-item__body__left__content__label {
		font-size: $main-title-size !important;
	}
	
	.u-form-item__body__right__content {
		font-size: $main-title-size !important;
		height: 100% !important;
	}
	
	.u-form-item__body__right__message {
		font-size: 24rpx !important;
		line-height: 24rpx !important;
	}
	
	.u-input__content__field-wrapper__field {
		font-size: $main-title-size !important;
	}
	
	.u-textarea {
		background-color: #fbfbfb !important;
	}
}


// 设置导航栏背景色
// u-status-bar 是安全高度开启时的背景色
//u-navbar__content 是主题内容背景色
.u-navbar {
	width: 100%;
	
	// 顶部导航栏 navbar点击左侧会有改变透明的的操作，直接强制赋值为1
	&__content {
		&__left {
			opacity: 1 !important;
			
			.u-icon__icon {
				color: $main-title-color !important;;
			}
		}
		
		// title标题颜色
		&__title {
			color:	$main-title-color !important;
			font-size: $main-card-size-text !important;
		}
		
	}
	
	// 设置背景色以及安全高度站位背景色
	.u-navbar__content,.u-status-bar {
		background-color: $main-background-color !important;
	}
}

// 初始化弹层的flex问题
.PopupInit {
	flex: initial !important;
}

// 按钮的边框线在这里去除
uni-button:after {
	border: none !important;
}



// uview2中的表单组件，在 u-form-item 上增加这个类名，可以实现上下布局
.TopOption {
	.u-form-item__body {
		flex-direction: column !important;
	}
}



// 自定义弹层
.Popup_Main {
	flex: inherit !important;
	
	// 容器
	.Popup_Main_Content {
		// background-color: #fff;
		background-color: #f7f7f7;
		display: flex;
		flex-direction: column;
		
		.Popup_Main_Content_MainBox {
			flex: 1;
			overflow: auto;
			
			.Popup_Form {
				
				// 部分form表单需要上下排布 
				.TopOption {
				
					.u-form-item__body {
						flex-direction: column !important;
					}
				}
				
				.Init_Item_PadLeft {
					padding-left: 0 !important;
				}
			}
		}
		
		.Popup_Main_Content_BottomBox {
			// height: 100rpx;
			padding: 16rpx 16rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			background-color: #fff;
			border-top: 1px solid #f9f9f9;
			
			uni-button {
				margin-left: initial !important;
				margin-right: initial !important;
			}
			
			.moreBtn {
				width: fit-content;
				min-width: 200rpx;
				max-width: 30%;
			}
			
			.content_bottom_primary_Btn {
				background-color: $main-background-color;
				color: $main-title-color;
			}
		}
	}
}

// 自定义页面框架样式
.content {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100vh;
	background-color: $main-content-bgc;
	
	// 主内容
	.content_main {
		flex: 1;
		overflow: auto;
	}
	
	// 底部内容
	.content_bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 70px;
		line-height: 70px;
		padding: 6px 15px;
		border-top: 1px solid #efefef;
		uni-button {
			margin-left: initial !important;
			margin-right: initial !important;
		}
		
		// 主题镂空按钮
		.content_bottom_primary_plainBtn {
			background-color: $main-title-color;
			color: $main-background-color;
			border: 1px solid $main-background-color;
		}
		// 主题实面按钮
		.content_bottom_primary_Btn {
			background-color: $main-background-color;
			color: $main-title-color;
		}
		
		.moreBtn {
			width: fit-content;
			min-width: 200rpx;
			max-width: 30%;
		}
	}
}


// 通用卡片
.content_main_CardBox {
	position: relative;
	border-radius: 16rpx;
	padding: 20rpx;
	background-color: #fff;
	min-height: 100rpx;
	
	&_TopBox {
		padding: 0 0 20rpx 20rpx;
		border-bottom: 1px solid #efefef;
		margin-bottom: 10rpx;
		
		&_TitleName {
			font-size: $main-card-size-text;
		}
		
		
		.TagBox {
			.theTag {
				padding: 2rpx 4rpx !important;
			}
		}
	
	}
	
	// 序号
	.content_main_CardBox_ordinal {
		// position: absolute;
		// left: 20rpx;
		// top: 20rpx;
		background-color: $main-background-color;
		color: $main-title-color;
		display: flex;
		justify-content: center;
		align-items: center;
		width: fit-content;
		min-width: 34rpx;
		height: 34rpx;
		font-size: 22rpx; 
		border-radius: 8rpx;
	}
}

.BottomBox {
	width: 100%;
	padding: 6px 15px;
	border-top: 1px solid #efefef;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: #fff;
}

::v-deep button {
	margin-right: initial;
	margin-left: initial;
}

::v-deep .CommonBtnSize {
	min-width: 160rpx !important;
	font-size: 14px !important;
	padding: 2px 4px !important;
	box-sizing: border-box;
	/* #ifdef MP-WEIXIN */
	margin-right: initial;
	margin-left: initial;
	::v-deep .u-button {
		min-width: 160rpx !important;
		font-size: 14px !important;
		padding: 2px 4px !important;
	}
	/* #endif */
}

// 主题镂空按钮
.content_bottom_primary_plainBtn {
	background-color: $main-title-color;
	color: $main-background-color;
	border: 1px solid $main-background-color;
}
// 主题实面按钮
.content_bottom_primary_Btn {
	background-color: $main-background-color;
	color: $main-title-color;
	border: 1px solid $main-background-color;
}
// 危险色系
.content_bottom_danger_Btn {
	background-color: #f56c6c;
	color: #fff;
	border: 1px solid #f56c6c;
}
.content_bottom_danger_plainBtn {
	background-color: #fff;
	color: #f56c6c;
	border: 1px solid #f56c6c;
}




/* #ifndef MP-WEIXIN */

// 复选框样式 start
.uni-checkbox-input {
	border: 2px solid #d1d1d1 !important;
}
.uni-checkbox-input-checked {
	background: $main-background-color;
	color: $main-title-color !important;
	border-color: $main-background-color !important;
}
/* #endif */




// 防止 My-Field 组件影响页面性能
.FiledBox {
	padding:  2rpx 8rpx;
	&_black {
		color: #333;
	}
	&_grifola {
		color: #999;
	}
	&_white {
		color: #fff;
	}
	&_label {
		font-size: $main-card-size-text;
		color: #333;
		&_f28 {
			font-size: $main-card-size-text;
		}
		&_f24 {
			font-size: 24rpx;
		}
		&_x15 {
			font-size: 15px;
		}
	}
	&_value {
		margin-left: 10rpx;
		color: #999;
		&_f28 {
			font-size: $main-card-size-text;
		}
		&_f24 {
			font-size: 24rpx;
		}
		&_x15 {
			font-size: 15px;
		}
		&_x14 {
			font-size: 14px;
		}
	}
}

.flex-auto {
	flex: 1;
	overflow: auto;
}

.x-bc {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.f-dc {
	display: flex;
	flex-direction: column;
}

/*flex布局*/

.x-ec {
	display: flex;
	justify-content: flex-end;
	align-items:center;
}

/* x水平排列*/
.x-f {
	display: flex;
	align-items: center;
}
/*x两端且水平居中*/
.x-bc {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/*x平分且水平居中*/
.x-ac {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
/*x水平靠上对齐*/
.x-start {
	display: flex;
	align-items: flex-start;
}
/*x水平靠下对齐*/
.x-end {
	display: flex;
	align-items: flex-end;
}
/*上下左右居中*/
.x-c {
	display: flex;
	justify-content: center;
	align-items: center;
}
.x-sec {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
/*y竖直靠左*/
.y-start {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/*y竖直靠右*/
.y-end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
/*y竖直居中*/
.y-f {
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* y竖直两端*/
.y-b {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/*y竖直两端居中*/
.y-bc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}